<template>
  <app-page>
    <mxp-refresh-page ref="mxpRefreshPageRef" :reachBottom="true" :queryData="queryList">
      <view style="box-sizing: border-box; padding: 0 30rpx">
        <view v-for="(item, index) in playRecord" :key="index" class="view-record" @click="openVideoDetails(item)">
          <view class="img-box">
            <mxp-image width="180rpx" height="260rpx" borderRadius="12px" errorSize="22px" :src="item.dramaCover"></mxp-image>
          </view>
          <view style="display: flex; flex: 1; flex-direction: column; justify-content: center; width: 100%; padding-left: 15px">
            <view class="record-title-box">
              <text class="record-title">{{ item.dramaTitle }}</text>
            </view>
            <view style="display: flex; flex-direction: column; justify-content: space-between">
              <view class="record-info-box">
                <text class="intro record-info">简介: {{ item.dramaDesp || '' }}</text>
              </view>
              <view class="record-info-box-seq">
                <view class="seq">
                  <view>
                    <text class="have-see record-info">已看 {{ item.episodeSeq }} 集</text>
                    <text class="record-info total">&nbsp;/ 共 {{ item.seqNum }} 集</text>
                  </view>
                  <view class="schedule">
                    <view class="actual" :style="{ right: `${100 - (item.episodeSeq / item.seqNum) * 100}%` }"></view>
                  </view>
                </view>
                <view class="butt-box">立即观看</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import AppPage from '@/components/app-page/app-page.vue';
  import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import { type MyChasingDrama, myChasingDramaListAxios } from '@/api/drama';
  import { openPlayletPage } from '@/utils/page/rest';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh.ts';

  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh, onReachBottom);

  /** 播放记录列表 */
  const playRecord = ref<MyChasingDrama[]>([]);

  /**
   * 获取数据
   */
  async function queryList(ins: Ins) {
    try {
      const res = await myChasingDramaListAxios(ins.page, ins.size);
      playRecord.value = ins.page > 1 ? playRecord.value.concat(res.data.records) : res.data.records;
      ins.setMoreSuccess(res.data.records.length, res.data.total);
    } catch (error) {
      ins.setMoreEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }

  /** 打开视频详情 */
  function openVideoDetails(item: MyChasingDrama) {
    openPlayletPage(item);
  }
</script>

<style lang="scss" scoped>
  .view-record {
    position: relative;
    display: flex;
    width: 690rpx;
    padding-top: 15px;
    vertical-align: top;

    .record-title-box {
      width: 100%;

      .record-title {
        overflow: hidden;
        font-size: 30rpx;
        font-weight: bold;
        color: #000000;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .record-info-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .record-info {
        font-size: 24rpx;
        text-align: justify;
      }

      .intro {
        display: -webkit-box;
        padding-top: 20rpx;
        overflow: hidden;
        color: #999999;
        word-break: break-all;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }

    .record-info-box-seq {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 24rpx;

      .seq {
        display: flex;
        flex-direction: column;
        gap: 10rpx;
        justify-content: center;
        width: 60%;

        .schedule {
          position: relative;
          height: 8rpx;
          background-color: #dddddd;
          border-radius: 4rpx;

          .actual {
            position: absolute;
            left: 0;
            height: 100%;
            background: linear-gradient(to right, #fdbe00 0%, #f66f00 100%);
            border-radius: 4rpx;

            &:after {
              position: absolute;
              top: -2rpx;
              right: -2rpx;
              width: 12rpx;
              height: 12rpx;
              content: '';
              background-color: #ffffff;
              border-radius: 50%;
              box-shadow: 0 0 6rpx #999999;
            }
          }
        }

        .total {
          color: #999999;
        }
      }

      .butt-box {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 22rpx;
        color: #ff6e25;
        background: #ffeee5;
        border-radius: 4px;
      }
    }
  }
</style>
